<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home/welcome' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>订单管理</el-breadcrumb-item>
            <el-breadcrumb-item>订单列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="box-card" style="margin-top:20px">
            <div slot="header" class="clearfix">
                <span><i class="el-icon-edit-outline"></i>&nbsp;操作面板</span>
                <el-button style="float: right; padding: 3px 0" type="text"><i class="el-icon-edit"></i> 新增商家</el-button>
            </div>
            <!-- 关键字搜索框 -->
            <div class="demo-input-suffix">
                <el-input placeholder="请输入联系人/电话" prefix-icon="el-icon-search" v-model="searchForm.keywords" maxlength="20"
                    show-word-limit style="width:200px" size="small">
                </el-input>
                <!-- <el-button type="primary" icon="el-icon-search" style="margin-left:20px" :loading="state"
                    @click="state = !state">搜索</el-button> -->
                <el-button type="primary" icon="el-icon-search" style="margin-left:10px" size="small"
                    @click="loadData">搜索</el-button>
            </div>
            <template>
                <el-table :data="tableData" stripe style="width: 100%;margin-top:20px;">
                    <el-table-column prop="po_id" label="订单编号" width="80" align="center">
                    </el-table-column>
                    <el-table-column prop="p_img" label="宠物图片" width="160" align="center">
                        <template slot-scope="scope">
                            <el-image :src="scope.row.p_img" style="width:80px;height:60px" fit="contain"></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column prop="p_name" label="宠物名称" width="80" align="center">
                    </el-table-column>
                    <el-table-column prop="name" label="联系人" width="80" align="center">
                    </el-table-column>
                    <el-table-column prop="tel" label="联系电话" width="115" align="center">
                    </el-table-column>
                    <el-table-column prop="b_name" label="商家名称" align="center" width="80">
                    </el-table-column>
                    <el-table-column prop="b_city_detail" label="商家地址" align="center" width="100">
                    </el-table-column>
                    <el-table-column prop="po_time" label="订单时间" align="center" width="185">
                        <template slot-scope="scope">
                            <i class="el-icon-time">&nbsp;&nbsp;{{ format(scope.row.po_time) }}</i>
                        </template>
                    </el-table-column>
                    <el-table-column prop="po_price" label="订单价格" align="center" width="90">
                        <template slot-scope="scope">
                            <el-tag>{{ scope.row.po_price }}元</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="po_status" label="订单状态" align="center" width="100">
                        <template slot-scope="scope">
                            <el-tag type="success" v-if="scope.row.po_status == 1">进行中</el-tag>
                            <el-tag type="warning" v-if="scope.row.po_status == 2">已完成</el-tag>
                            <el-tag type="danger" v-if="scope.row.po_status == 3">已取消</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="180" align="center">
                        <template slot-scope="scope">
                            <!-- <el-button size="small" @click="handleClick(scope.row, 'update')"
                                icon="el-icon-edit">编辑</el-button> -->
                            <el-button size="small" @click="handleClick(scope.row)" type="danger"
                                icon="el-icon-delete">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
            <div class="page-box" style="text-align:right">
                <el-pagination background layout="prev, pager, next" :total="total" :page-count="5" :page-size="pageSize"
                    @current-change="currentChange" @prev-click="prevClick" @next-click="nextClick">

                </el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
    props: {

    },
    components: {

    },
    data() {
        return {
            searchForm: {
                keywords: ""
            },
            page: 1,//当前页码
            pageSize: 4,//每页显示条数
            total: 0,
            tableData: []
        }
    },
    methods: {
        format(date) {
            let newDate = this.$moment(date).format("YYYY-MM-DD hh:mm:ss");
            return newDate
        },
        judge(row) {

        },
        loadData() {
            // 校验搜索关键字
            let keywords = this.searchForm.keywords.trim()
            console.log(keywords);
            if (!keywords) keywords = "''"
            // 封装请求路径
            let url = `${this.$api.orderGet}/${this.page}/${this.pageSize}/${keywords}`
            console.log(url);
            // 请求后端
            this.$axios.get(url).then(res => {
                console.log(res);
                if (res?.data.code == 200) {
                    this.page = res?.data?.data?.page
                    this.pageSize = res?.data?.data?.pageSize
                    this.total = res?.data?.data?.total
                    this.tableData = res?.data?.data?.result1
                }
            }).catch(err => {
                console.log(err);
            })
        },
        handleClick(row) {
            const { po_id } = row
            this.$confirm('是否确认删除该条订单信息?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 删除实现
                let url = `${this.$api.orderdelete}/${po_id}`
                this.$axios.delete(url).then(res => {
                    console.log(res);
                    // token失效
                    if (res?.code === 202) {
                        this.$message.error(res?.msg)
                        this.$router.replace("/login")
                    }
                    if (res?.data?.code === 200) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        // 删除成功,更新表格数据
                        this.loadData()
                    } else {
                        this.$message.error(res?.data?.msg)
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '删除失败'
                });
            });
        },
        currentChange(row) {
            console.log("currentChange" + row);
            this.page = row
            this.loadData()
        },
        prevClick(row) {
            console.log("prevClick" + row);
        },
        nextClick(row) {
            console.log("nextClick" + row);
        }
    },
    async mounted() {
        await this.loadData()
    },
}
</script>
<style scoped>
.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}

.box-card {
    width: 100%;
}
</style>
